<!--
 * @Author: zhangyang
 * @Date: 2022-03-02 17:57:12
 * @LastEditTime: 2022-05-31 16:27:00
 * @Description: 侧边栏组件
-->
<script lang="ts" setup>
import { TopIndex } from '@/stores';
import { isCollapse, useNavStore } from '@/stores';
import type { NavArrItem } from '@/typings';
import { Icons } from '@/conf';
import type { MenuOption } from 'naive-ui';
import type { Ref } from 'vue';
import { RouterLink } from 'vue-router';
import Logo from './Logo';

const { NavArr } = storeToRefs(useNavStore());

const parseNav = (arr: NavArrItem[]) => {
  arr = arr.filter((i) => i.visible === 1);
  for (let item of arr) {
    if (item?.children?.length === 0) {
      delete item.children;
    } else if (item.children) {
      item.children = parseNav(item.children);
      if (item.children?.length === 0) {
        delete item.children;
      }
    }
    if (!item.icon_name) {
      item.icon_name = item.icon;
      // @ts-ignore
      const iconComponent = Icons[item.icon_name] ?? Icons.store;
      item.icon = () => h(iconComponent);  
    }
    
    if (item.component.startsWith('http')) {
      item.label = () => h(
        'a',
        { href: item.component, target: '_blank' },
        item.title
      );
    } else if (item.component !== '') {
      let node_name = item.title;
      delete item.title;
      item.label = () => h(
        RouterLink,
        { to: { path: item.component ?? '/' } },
        { default: () => node_name }
      );
    } else {
      item.label = item.title;
    }
  }
  return arr;
};

const options = computed(() => parseNav(NavArr.value)) as unknown as Ref<MenuOption[]>;
</script>
<template>
  <NLayoutSider
    bordered
    collapse-mode="width"
    :collapsed-width="64"
    :width="240"
    :collapsed="isCollapse"
  >
    <Logo />
    <NMenu
      v-model:value="TopIndex"
      inverted
      key-field="id"
      :collapsed-width="64"
      :collapsed-icon-size="22"
      :collapsed="isCollapse"
      :options="options"
    />
  </NLayoutSider>
</template>


<style lang="scss" scoped>
.n-layout-sider {
  background-color: #304156;
  @apply h-100vh text-gray-300;
}
</style>